<template>
	<div class="adminMain" v-loading="load.load">
		<el-row class="tableBtnTop">
			<el-select v-model="field.id" placeholder="请选择" class="filter">
				<el-option v-for="(item, index) in field.list" :label="item.label" :key="item.key" :value="item.value"></el-option>
			</el-select>
			<div class="search">
				<el-input placeholder="请搜索" v-model="keyword" @keyup.enter.native="page = 1;getList()">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<el-date-picker type="daterange" v-model="time" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" style="width:400px;margin-right:15px;" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" popper-class="index_promotionData_daterange_popper_class"></el-date-picker>
			<el-button class="f1" @click="getList">立即搜索</el-button>
		</el-row>
		<el-table :data="tableData" border @filter-change="filterChange">
			<el-table-column prop="" label="用户" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<div class="device_view flex">
						<a class="userHead" target="_blank" :href="`/user/detail/?id=`" v-if="scope.row.user_info">
							<img :src="scope.row.user_info.avatar" v-if="scope.row.user_info.avatar" class="square" />
							{{ scope.row.user_info.nickname || "-" }}
						</a>
						<template v-else>-</template>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="union_id" label="音乐记录ID" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="status_txt" label="状态" :show-overflow-tooltip="true" :filters="filerComputed('status').select" :filtered-value="filerComputed('status').value" column-key="status"></el-table-column>
            <el-table-column prop="created_at" label="投诉时间" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column prop="" label="处理时间" :show-overflow-tooltip="true">
            	<template slot-scope="scope">{{ scope.row.finish_time || "-" }}</template>
            </el-table-column>
			<el-table-column prop="user" label="操作" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div class="tableBtn">
                        <a class="color" v-if="!scope.row.status" @click="handItem(scope.$index)">已处理</a>
						<template v-else>-</template>
                    </div>
                </template>
            </el-table-column>
		</el-table>
		<div class="paginationBlock">
			<el-pagination layout="prev, pager, next, sizes, total" @size-change="getList" @current-change="getList" :total="total" :current-page.sync="page" :page-size.sync="limit" ></el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
				// 是否处于加载中
				load: { load: false },
				
				// 表格数据
				tableData: [],
				
				// 当前页数
				page: this.$route.query.page ? parseInt(this.$route.query.page) : 1,
				
				// 每页条数
				limit: this.$route.query.limit ? parseInt(this.$route.query.limit) : this.app.limit,
				
				// 总数
				total: this.$route.query.total ? parseInt(this.$route.query.total) : 0,
				
				// 可选择的搜索类型列表
				field: {
					list: [],
					id: this.$route.query.field || "",
				},
				
				// 搜索关键词
				keyword: this.$route.query.keyword || "",
				
				// 时间
				time: this.$route.query.time ? this.$route.query.time.split(",") : [],
				
				// 过滤某些类型
				filter: []
				
			};
		},
		computed: {
			
			// 过滤类型筛选
			filerComputed(){
				return function(key){
					let filerItem = { select: [], value: [] };
					this.filter.filter((item, index) => {
						(item.field === key) && (filerItem = item);
					});
					return filerItem;
				}
			},
			
		},
		methods: {
			
			// 加载列表
			getList(){
				let _this = this;
				let filterData = {}; //筛选的参数
				_this.filter.map((item) => filterData[item.field] = item.value.join(","));
				_this.app.ajax({
					url: "/admin/complaintLog/index",
					method: "POST",
					data: Object.assign({
						keyword: _this.keyword,
						field: _this.field.id,
						limit: _this.limit,
						page: _this.page,
						time: _this.time ? _this.time.join(",") : "",
					}, filterData),
					load: _this.load,
					changeUrl: true,
					success(res){
						_this.total = res.data.total;
						_this.tableData = res.data.list;
						_this.field.list = res.data.fields;
						_this.field.id = _this.field.id || res.data.fields[0].value;
						
						res.data.filter.map((item) => {
							item.value = _this.$route.query[item.field] ? _this.$route.query[item.field].split(",") : [];
						});
						_this.filter = res.data.filter;
					}
				})
			},
			
			// 筛选变更
			filterChange(e) {
				this.filter.map((item) => {
					if(item.field === Object.keys(e)[0]){
						item.value = e[item.field];
					}
				});
				
				this.$nextTick(() => {
					this.page = 1;
					this.getList();
				});
			},
			
			// 标记处理
			handItem(index){
				let _this = this;
				_this.app.ajax({
					url: "/admin/complaintLog/update",
					method: "POST",
					load: _this.load,
					data: { id: _this.tableData[index].id, status: true },
					success(res){
						_this.getList();
						_this.$notify({title: "提示",message: res.msg, type: "success"});
					}
				})
			},
			
		},
		mounted(){
			this.getList();
		},
	};
</script>